<template>
  <el-tabs type="border-card" model-value="item1">
    <el-tab-pane name="item1">
      <template v-slot:label><el-icon><Paperclip /></el-icon>选择题</template>
      <lookChoice/>
    </el-tab-pane>
    <el-tab-pane name="item2">
      <template v-slot:label><el-icon><Paperclip /></el-icon>填空题</template>
      <lookFill/>
    </el-tab-pane>
    <el-tab-pane name="item3">
      <template v-slot:label><el-icon><Paperclip /></el-icon>判断题</template>
      <lookJudge/>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import {getCurrentInstance, onMounted, onUnmounted, ref} from "vue";
import {useRoute} from "vue-router/dist/vue-router";
import {Paperclip} from '@element-plus/icons-vue'
export default {
  name: "lookPaperAnswer",
  components: {Paperclip},
  setup(){
    const {proxy} = getCurrentInstance()
    const route = useRoute()
    let paperName = ref(null)
    onMounted(()=>{
      proxy.$axios.get(
          `/manage/paper/${route.query.id}`
      ).then(
          response => {
            paperName.value = response.data.paperName
          },
          error => {
            console.log('请求失败', error.message)
          }
      )
    })
    onUnmounted(()=>{
      proxy.$bus.emit('sendData',null)
    })
    return{
      paperName
    }
  }
}
</script>

<style scoped>
.title {
  font-size: 20px;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
  color: #2CD9D9FF;
  display: flex;
  justify-content: center;
}
.list{
  display: flex;
  flex-direction: row;
  margin-left: 220px;
}
.list li {
  padding: 0 50px;
  cursor: pointer;
}
.alink{
  font-size: 30px;
}
</style>